.transition(@type: background-color, @duration: 0.3s) {
    transition: @duration ease @type;
}

.removeOnePx(@direction) when (@direction = all) {
    border: 0;
    &::after {
        display: none!important
    }
}
  
.removeOnePx(@direction) when (@direction = top) {
    border-top: 0;
    &::after {
        display: none!important
    }
}
  
.removeOnePx(@direction) when (@direction = right) {
    border-right: 0;
    &::after {
        display: none!important
    }
}
  
.removeOnePx(@direction) when (@direction = bottom) {
    border-bottom: 0;
    &::after {
        display: none!important
    }
}

.removeOnePx(@direction) when (@direction = left) {
    border-left: 0;
    &::after {
        display: none!important
    }
}

.onePxComm(@color, @top, @right, @bottom, @left) {
    content: '';
    position: absolute;
    background-color: @color;
    display: block;
    z-index: 1;
    top: @top;
    right: @right;
    bottom: @bottom;
    left: @left;
}

.setOnePxBySide(@direction:left; @color: #dcdcdc) when (@direction = top) {
    border-top: 1PX solid @color;
  
    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-top: none;
        &::after {
          .onePxComm(@color, 0 ,auto, auto, 0);
          width: 100%;
          height: 1Px;
          transform-origin: 50% 50%;
          transform: scaleY(0.5);
    
          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
    
}

.setOnePxBySide(@direction:left; @color: #dcdcdc) when (@direction = bottom) {
position: relative;
border-bottom: 1PX solid @color;

html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
    border-bottom: none;
    &::after {
        .onePxComm(@color, auto ,auto, 0, 0);
        width: 100%;
        height: 1Px;
        transform-origin: 50% 100%;
        transform: scaleY(0.5);

        @media (min-resolution: 3dppx) {
        transform: scaleY(0.33);
        }
    }
    }
}

}

.setOnePxBySide(@direction:left; @color: #dcdcdc) when (@direction = left) {
position: relative;
border-left: 1PX solid @color;

html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
    border-left: none;
    &::after {
        .onePxComm(@color, 0 ,auto, auto, 0);
        width: 1Px;
        height: 100%;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);

        @media (min-resolution: 3dppx) {
        transform: scaleX(0.33);
        }
    }
    }
}
}

.setOnePxBySide(@direction:left; @color: #dcdcdc) when (@direction = right) {
position: relative;
border-right: 1PX solid @color;

html:not([data-scale]) & {
    @media (min-resolution: 2dppx) {
    border-right: none;
    &::after {
        .onePxComm(@color, 0 ,0, auto, auto);
        width: 1Px;
        height: 100%;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);

        @media (min-resolution: 3dppx) {
        transform: scaleX(0.33);
        }
    }
    }
}
// &:after {
//   content: " ";
//   position: absolute;
//   right: 0;
//   bottom: 0;
//   top: 0;
//   width: 1Px;/*no*/
//   border-right: 1Px solid @color;/*no*/
//   color: @color;
//   transform-origin: 0 100%;
//   transform: scaleX(0.5);
//   box-sizing: border-box;
// }
}